<template>
	<view class="container">
		<u-form :model="addForm" ref="uForm" label-width="70">
			<u-form-item label="姓名">
				<u-input v-model="addForm.name" border="none" placeholder="请输入姓名" />
			</u-form-item>
			<u-form-item label="手机号">
				<u-input v-model="addForm.phone" border="none" placeholder="请输入手机号" />
			</u-form-item>
			<u-form-item label="地区" @click="shows = true">
				<u-input v-model="addForm.area_name" border="none" placeholder="请选择地区" />
			</u-form-item>
			<u-form-item label="详细地址">
				<u-input v-model="addForm.desc" border="none" placeholder="请输入详细地址" />
			</u-form-item>
			<u-form-item label="默认地址">
				<u-switch v-model="defAdd" @change="change"></u-switch>
			</u-form-item>
		</u-form>
		<u-button v-if="!this.addForm.id" type="primary" text="保存" shape="circle" class="btn_save" @click="createAdd"></u-button>
		<u-button v-else type="primary" text="修改" shape="circle" class="btn_save" @click="editAdd"></u-button>
		<u-picker :show="shows" ref="uPicker" keyName="label" :columns="columns" @cancel="shows=false" @confirm="confirm" @change="changeHandler"></u-picker>
	</view>
</template>

<script>
	import {mapActions,mapState} from 'vuex'
	export default {
		data() {
			return {
				addForm:{
					id:'',
					name:'',
					phone:'',
					area:'',
					desc:'',
					area_name:'',
					post_code:'1000',
					default_set:''
				},
				shows:false,
				columns:[],
				columnData:[],
				defAdd:false,
				// 是那个页面来的
				page:'',
				editId:''
			}
		},
		computed:{
			...mapState('address',['cityList'])
		},
		onLoad(options) {
			this.getCityList()
			this.manageCity(this.cityList)
			if(options.add){
				this.addForm=JSON.parse(options.add)
			}
		},
		methods: {
			...mapActions('address',['getCityList','createAddress','editAddress','getAddressList','defAddress']),
			// 处理城市
			manageCity(cityList){
				let arr=[]
				cityList.forEach(ele=>{
					let data={}
					data.label=ele.label
					data.children=ele.children
					data.id=ele.id
					arr.push(data)
				})
				this.columns.push(arr)
				this.columns.push(this.columns[0][0].children)
				this.columns.push(this.columns[0][0].children[0].children)
			},
			changeHandler(e) {
				const {
					columnIndex,
					values,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
	// 			if (columnIndex === 0) {
	// 				// this.loading = true
					
	
	// 					picker.setColumnValues(1, this.columnData[index])
	// 					// this.loading = false
	// 			}
	
	
				// console.log(columnIndex,index,values,picker);
				
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, e.value[0].children)
					picker.setColumnValues(2, values[1][0].children)
				} else if (columnIndex === 1) {
					picker.setColumnValues(2, e.value[1].children)
				}
			},
			// 地区确认
			confirm(e) {
				let str=''
				e.value.forEach(ele=>{
					str+=ele.label
				})
				this.addForm.area=e.indexs.join(',')
				this.addForm.area_name=str
				this.shows = false
			},
			// 默认地址开关
			change(e) {
				if(e){
					this.addForm.default_set='1'
					this.defAddress(this.addForm.id)
				}
			},
			// 新增按钮
			createAdd(){
				this.createAddress(this.addForm)
				this.getAddressList()
				uni.navigateTo({
					url:'/subpackage/address/address'
				})
			},
			// 修改地址
			editAdd(){
				this.editAddress(this.addForm)
				this.getAddressList()
				uni.navigateTo({
					url:'/subpackage/address/address'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	width: 100%;
	height: 100vh;
	background-color: #f1f8fa;
	.u-form{
		padding: 30rpx;
		.u-form-item{
			background-color: #fff;
		}
	}
	.btn_save{
		width: 700rpx;
	}
}
</style>
